<template>
  <d2-container>
    <template slot="header">
      <el-row>选择日期范围后，点查询展示图表</el-row>
      <el-row>
        <el-date-picker
          size="mini"
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
        ></el-date-picker>
        &nbsp;
        <el-button type="primary" size="mini" @click="search()">查询</el-button>
      </el-row>
    </template>

    <div class="inner">
      <ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
    </div>
  </d2-container>
</template>

<script>

import request from "@/plugin/axios";

export default {
  name: 'topcourse',
  
  data() {
    this.chartSettings = {
      roseType: 'radius'
    }
    return {
      value1: null,
      chartData: {
        columns: ['课程', '合计'],
        rows: []
      }
    }
  },
  methods: {
    search() {
      request({
        url: "/statis/topCourseStatis",
        method: "get",
        params: {
          startDate: this.value1[0] + " 00:00:00",
          endDate: this.value1[1] + " 23:59:59",
        }
      }).then(resp => {
        console.log(resp);
        this.chartData.rows = resp.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.inner {
  position: absolute;
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
}

.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>